<template>
	<div id="audition_timetable" class="dialog animated"  :class="open? 'fadeIn':'fadeOut'"
		 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
		 
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				{{audition.className}}
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="time_head">
				<i class="el-icon-arrow-left time_btn" @click="goNext(-1)"></i>
				<span class="head_title">
					{{now}}
				</span>
				<i class="el-icon-arrow-right time_btn" @click="goNext(1)"></i>
				
				<el-date-picker class="date_pick" v-model="pickDay" type="date" 
								placeholder="选择日期查询" @change="pickDayChange">
    			</el-date-picker>
    
				<div class="time_tab_list">
					<div class="time_tab" :class="tab=='日'?'time_tab_active':''" @click="changeTab('日')">日期</div>
					<div class="time_tab" :class="tab=='周'?'time_tab_active':''" @click="changeTab('周')">周</div>
					<div class="time_tab" :class="tab=='月'?'time_tab_active':''" @click="changeTab('月')">月份</div>
				</div>
			</div>
			<div v-if="tab=='日'">
				<div class="day">{{getWeek}}</div>
				<div class="table_scroll animated" :class="isAni? 'fadeIn' : ''">
					<div style="position: relative;">
						<div class="day_data_list">
							<div class="day_data" :class="item.cla" v-for="item in weekData"
								 :style="item.sty" @click="selectSyllabus(item.syllabus)">
								<div>
									<span>上课时间：{{item.syllabus.classTime}}</span>&emsp;
									<span>学员：{{item.syllabus.classNum}}</span>
								</div>
							</div>
						</div>
						<table class="table">
							<tbody>
								<tr v-for="item in timeList">
									<td class="td td_time">{{item}}</td>
									<td class="td"></td>
									<td class="td"></td>
									<td class="td"></td>
									<td class="td"></td>
									<td class="td"></td>
									<td class="td"></td>
									<td class="td"></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			
			<div v-if="tab=='周'">
				<div class="week">
					<table class="table">
						<tr>
							<td class="td td_time"></td>
							<td class="td" v-for="item in weekList">
								<div class="week_div" :class="item.date==today? 'week_active':''">
									<i class="el-icon-caret-bottom arrow"></i>
									<span class="week_week">{{item.week}}</span>
									<span class="week_day">{{item.text}}</span>
								</div>
							</td>
						</tr>
					</table>
				</div>
				<div class="table_scroll animated" :class="isAni? 'fadeIn' : ''" style="height: 5.6rem;">
					<div style="position: relative;">
						<div class="week_data_list">
							<div class="week_data" :class="item.cla" v-for="item in weekData"
								 :style="item.sty" @click="selectSyllabus(item.syllabus)">
								<div>
									<div>上课时间：{{item.syllabus.classTime}}</div>
									<div>学员：{{item.syllabus.classNum}}</div>
								</div>
							</div>
						</div>
						<table class="table">
							<tr v-for="item in timeList">
								<td class="td td_time">{{item}}</td>
								<td class="td"></td>
								<td class="td"></td>
								<td class="td"></td>
								<td class="td"></td>
								<td class="td"></td>
								<td class="td"></td>
								<td class="td"></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			
			<div v-if="tab=='月'">
				<div class="month">
					<table class="table">
						<tr>
							<td class="td" v-for="item in weekList">
								<div class="month_div">{{item.week}}</div>
							</td>
						</tr>
					</table>
				</div>
				<div class="table_scroll animated" :class="isAni? 'fadeIn' : ''">
					<div style="position: relative;">
						<div>
							<div class="month_data" :class="item.cla" v-for="item in monthData"
								 :style="item.sty">
								<div v-for="li in item.list">
									<div>上课时间：{{li.classTime}}</div>
									<div>学员：{{li.classNum}}</div>
								</div>
							</div>
						</div>
						<table class="table">
							<tbody>
								<tr v-for="week in monthList">
									<td class="td month_td" v-for="item in week"
										:class="item.date==today? 'month_active':''">
										<div class="month_date" :class="item.valid? 'month_valid':''">
												{{item.text}}
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
var vm,dict;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			visible : false,
			audition : {},
			tab : "周",
			now : "",
			pickDay : null,
			checkDay : new Date(),
			today : "",
			startDay : "",
			endDay : "",
			weekList : [{week : "星期一", date : "", text : ""},{week : "星期二", date : "", text : ""},
						{week : "星期三", date : "", text : ""},{week : "星期四", date : "", text : ""},
						{week : "星期五", date : "", text : ""},{week : "星期六", date : "", text : ""},
						{week : "星期日", date : "", text : ""}],
			monthList : [],
			timeList : [
//			"08:00","09:00","10:00"
			],
			syllabusList : null,
			dayData : [
//				{
//					sty : { height : 0.3*0.9+"rem", top : 1*0.9+"rem", }
//					cla : "full,blank,overdue",
//					syllabus : {}
//				}
			],
			weekData : [
//				{
//					sty : {height : 0.5*0.9+"rem", left : 1*1.9+"rem", top : 2*0.9+"rem"}
//					cla : "full,blank,overdue",
//					syllabus : {}
//				}
			],
			monthData : [
//				{
//					sty : {left : 1*2+"rem", top : 0*1.4+0.3+"rem"},
//					cla : "full,blank,overdue",
//					list : []
//				},
			],
			isAni : false
		}
	},
	computed : {
		getWeek : function() {
			var day = this.checkDay.getDay();
			var list = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
			return list[day];
		}
	},
	methods : {
		init : function(audition) {
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
			
			//初始化数据
			vm.audition = audition;
			vm.checkDay = new Date();
			vm.today = tool.DateToString(new Date(),"yyyy.MM.dd");
			vm.tab = "周";
			vm.pickDay = null;
			vm.isAni = false;
			vm.setTime();
			
			//加载该班级所有课节
			api.auditionSyllabus({classId : audition.classId}).then(function(data) {
				data.list.forEach(function(item) {
					//日期字符串
					item.date = item.startTime.substring(0,10).replace(/-/g,".");
					//开始结束日期对象
					item.start = new Date(item.startTime);
					item.end = new Date(item.endTime);
					
					//界面要显示的上课时间和班级人数
					item.classTime = item.startTime.substring(11,16) + "-" + item.endTime.substring(11,16);
					item.classNum = item.studentNum + " / " + item.recruitNum;
				})
				//保存课程列表,设置数据
				vm.syllabusList = data.list;
				vm.setData();
			});
		},
		cancel : function() {
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
			},500);
		},
		selectSyllabus : function(s) {
			//设置时间
			s.time = s.startTime+"~"+s.endTime.substring(11);
			s.status = null;
			vm.audition.syllabus = s;
			
			//如果原本有学生,则根据新选的课节,重新设置学生
			if(vm.audition.studentList) {
				var param = {
					classId : vm.audition.classId,
					classSyllabusId : s.classSyllabusId
				}
				api.auditionStudent(param).then(function(data) {
					vm.audition.studentList = data.list;
				});
			}
			vm.cancel();
			vm.$emit("callback");
		},
		changeTab : function(tab) {
			if(vm.tab == tab) {
				return;
			}
			vm.addAni();
			vm.tab = tab;
			vm.checkDay = new Date();
			vm.setTime();
			vm.setData();
			vm.pickDay = null;
		},
		goNext : function(num) {
			//需要克隆新对象,才能触发计算属性
			var c = tool.clone(vm.checkDay);
			vm.checkDay = c;
			
			if(vm.tab == "日") {
				c.setDate(c.getDate() + num);
			}
			if(vm.tab == "周") {
				c.setDate(c.getDate() + num*7);
			}
			if(vm.tab == "月") {
				c.setDate(1);
				c.setMonth(c.getMonth() + num);
			}
			vm.addAni();
			vm.setTime();
			vm.setData();
			vm.pickDay = null;
		},
		pickDayChange : function() {
			if(vm.pickDay) {
				vm.tab = "日";
				vm.addAni();
				vm.checkDay = tool.clone(vm.pickDay);
				vm.setTime();
				vm.setData();
			}
		},
		addAni : function() {
			vm.isAni = true;
			setTimeout(function(){
				vm.isAni = false;
			},500);
		},
		setTime : function() { //根据选中日期,重设时间参数
			
			var checkDay = tool.clone(vm.checkDay);
			var today = tool.DateToString(checkDay,"yyyy.MM.dd");
			
			if(vm.tab == "日") {
				//当天
				vm.startDay = vm.endDay = tool.DateToString(checkDay,"yyyy.MM.dd");
				vm.now = tool.DateToString(checkDay,"yyyy年MM月dd日");
			}
			if(vm.tab == "周") {
				//获取当周周一
				let d = checkDay.getDay() || 7;
				checkDay.setDate(checkDay.getDate() + 1 - d);
				
				//7天日期
				for(let i=0; i<7; i++) {
					vm.weekList[i].date = tool.DateToString(checkDay,"yyyy.MM.dd");
					vm.weekList[i].text = tool.DateToString(checkDay,"MM.dd");
					checkDay.setDate(checkDay.getDate() + 1);
				}
				
				//开始日期和结束日期
				vm.startDay = vm.weekList[0].date;
				vm.endDay = vm.weekList[6].date;
				//当前区间
				vm.now = vm.startDay + " - " + vm.endDay;
			}
			if(vm.tab == "月") {
				vm.now = tool.DateToString(vm.checkDay,"yyyy年MM月");

				//当月最后一天
				checkDay.setMonth(checkDay.getMonth()+1);
				checkDay.setDate(0)
				vm.endDay = tool.DateToString(checkDay,"yyyy.MM.dd");
				
				//h获取最后一天的当周周日
				let d = checkDay.getDay() || 7;
				let lastDay = tool.clone(checkDay);
				lastDay.setDate(lastDay.getDate() + 7 - d);
				
				//当月第一天
				checkDay.setDate(1);
				vm.startDay = tool.DateToString(checkDay,"yyyy.MM.dd");
				
				//定位到第一天的当周周一
				d = checkDay.getDay() || 7;
				checkDay.setDate(checkDay.getDate() + 1 - d);
				
				vm.monthList = [];
				while(checkDay < lastDay) {
					let week = [];
					for(let i=0; i<7; i++) {
						let date = tool.DateToString(checkDay,"yyyy.MM.dd");
						week.push({
							date : date,
							text : tool.DateToString(checkDay,"d"),
							valid : (date>=vm.startDay && date<=vm.endDay)
						});
						checkDay.setDate(checkDay.getDate() + 1);
					}
					vm.monthList.push(week);
				}
			}
			
		},
		setData : function() {
			switch(vm.tab) {
				case "日" : 
					vm.setDayData();
					break;
				case "周" : 
					vm.setWeekData();
					break;
				case "月" : 
					vm.setMonthData();
			}
		},
		setDayData : function() {
			vm.setWeekData();
			
			vm.weekData.forEach(function(item) {
				delete item.sty.left;
			})
		},
		setWeekData : function() {
			//默认最小最大时
			var min = 10;
			var max = 17;
			//满足时间的课节列表
			var list = [];
			//设置周数据
			vm.syllabusList.forEach(function(item) {
				//小于开始或者大于结束的排除
				if(item.date < vm.startDay || item.date > vm.endDay) {
					return;
				}
				list.push(item);
				//获取最小时和最大时
				var h1 = item.start.getHours();
				var h2 = item.end.getHours();
				min = (min > h1 ? h1 : min);
				max = (max < h2 ? h2 : max);
			})
			//设定时间列表
			vm.timeList = [];
			for(let i=min; i<=max; i++) {
				let hh = (i<10? "0"+i : i);
				vm.timeList.push(hh+":00");
			}
			//遍历有效的课节列表
			vm.weekData = [];
			list.forEach(function(item) {
				
				//计算高度
				var time = item.end.getTime() - item.start.getTime();
				var height = (time / 3600000) * 0.9 + "rem";
				
				//计算左边位置
				var d = item.start.getDay() -1;
				d = (d == -1 ? 6 : d);
				var left = d * 1.9 + "rem";
				
				//计算顶部位置
				var hour = item.start.getHours() + item.start.getMinutes()/60;
				var top = (hour - min) * 0.9 + "rem";
				
				//默认满人,未满和过期则再设置
				var cla = "full";
				if(item.studentNum < item.recruitNum) {
					cla = "blank";
				}
				if(item.end < new Date()) {
					cla = "overdue";
				}
				//合成周数据
				vm.weekData.push({
					cla : cla,
					sty : {height : height, left : left, top : top},
					syllabus : item
				})
			});
		},
		setMonthData : function() {
			//设置月数据
			vm.monthData = [];
			vm.syllabusList.forEach(function(item) {
				
				//小于开始或者大于结束的排除
				if(item.date < vm.startDay || item.date > vm.endDay) {
					return;
				}
				
				//计算左边位置
				var d = item.start.getDay() -1;
				d = (d==-1? 6 : d);
				var left = d * 2 + "rem";
				
				//计算顶部位置
				var top = null;
				vm.monthList.forEach(function(week,index){
					week.forEach(function(day) {
						//找到日期在月历的第几行
						if(day.date == item.date) {
							top = index;
							return false;
						}
					})
				});
				top = top * 1.4 + 0.3 + "rem";
				
				//先遍历月份数据，判断是否已经有对应的日期数据
				var data = null;
				vm.monthData.forEach(function(obj){
					if(obj.date == item.date) {
						data = obj;
						return false;
					}
				})
				//没有则创建日期数据
				if(!data) {
					data = {
						date : item.date,
						sty : {left : left, top : top},
						cla : "full", //默认课节满人了
						list : []
					}
					vm.monthData.push(data);
				}
				
				//有1个课节未满人
				if(item.studentNum < item.recruitNum) {
					data.cla = "blank";
				}
				//过期了
				if(item.end < new Date()) {
					data.cla = "overdue";
				}
				
				//课节保存进日日期数据中
				data.list.push(item);
			})
		},
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
	}
}

</script>

<style lang="scss">
	#audition_timetable .date_pick .el-input__inner {
	    border-radius: 0.08rem;
	    font-size: 0.14rem;
	    color: #666666;
	    height: 0.32rem;
	    line-height: 0.32rem;
	}
</style>

<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/clue_manage/timetable.css"></style>
<style scoped>

	.panel {
		width: 14.6rem;
		margin: 0.3rem auto;
		padding-bottom: 0.2rem;
	}
</style>